<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>添加商品信息</title>

    <!--页面样式-->
    <style>

        .select {
            margin: 20px 0 0 40px;
        }

        .info {
        }

        .pagination {
            margin: 20px 0 0 0;
            padding-left: 150px;
        }

        .add {
            float: right;
            margin-top: -35px;
            margin-right: 200px;
        }

        #addicon {
            float: right;
            width: 20px;
            height: 20px;
            margin: 40px 500px 0 0;
            padding: 5px 0 0 5px;
        }

        .add_allowSale {
            float: right;
            margin: -60px 300px 0 0;

        }

        .add_supplierId {

        }

        .demo-table-expand {
            font-size: 0;
        }

        .demo-table-expand label {
            width: 100px;
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }

        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        #canSaleSwitch{
            float: right;
            margin: -60px 300px 0 0;
        }


    </style>
</head>

<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>

<body>

<!--html主体部分-->
<div id="goods">
    <!--顶部查询表单-->
    <div class="select">
        <el-form :inline="true" :model="query" class="demo-form-inline">
            <el-form-item label="商品编号">
                <el-input v-model="query.commodityId" placeholder="商品编号"></el-input>
            </el-form-item>
            <el-form-item label="商品名称">
                <el-input v-model="query.commodityName" placeholder="商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品类型" id="productTypeSelectItem">
                <el-select v-model="query.typeId" placeholder="商品类型" class="add_manufacturerId">
                    <el-option
                            v-for="item in productType"
                            :key="item.typeId"
                            :label="item.typeName"
                            :value="item.typeId">
                        <span style="float: left">{{ item.typeId }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.typeName }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否正在促销">
                <el-switch v-model="query.ispromo" active-value="1"
                           inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="库存是否紧张">
                <el-switch v-model="query.isnervous" active-value="1"
                           inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!--商品信息表格-->
    <div class="info">
        <el-table :data="tableData" style="width: 100%" max-height="550" :row-class-name="tableRowClassName">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="图片">
                            <div class="demo-image__preview">
                                <el-image
                                        style="width: 100px; height: 100px"
                                        v-for="pic in props.row.pics"
                                        :src="pic"
                                        :preview-src-list="props.row.pics">
                                </el-image>
                            </div>
                        </el-form-item>
                        <el-form-item label="商品编号" prop="commodityId">
                            <span>{{ props.row.commodityId }}</span>
                        </el-form-item>
                        <el-form-item label="商品名称" prop="commodityName">
                            <span>{{ props.row.commodityName }}</span>
                        </el-form-item>
                        <el-form-item label="商品类型">
                            <span>{{ props.row.productType[0].typeName }}</span>
                        </el-form-item>
                        <el-form-item label="价格">
                            <span>{{ props.row.price }}</span>
                        </el-form-item>
                        <el-form-item label="促销价格">
                            <span>{{ props.row.promotionalPrice }}</span>
                        </el-form-item>
                        <el-form-item label="促销开始时间">
                            <span>{{ props.row.promotion_start_date }}</span>
                        </el-form-item>
                        <el-form-item label="促销截止时间">
                            <span>{{ props.row.promotion_end_date }}</span>
                        </el-form-item>
                        <el-form-item label="是否允许打折">
                            <span>{{ props.row.allowDiscount }}</span>
                        </el-form-item>
                        <el-form-item label="库存数量">
                            <span>{{ props.row.stockQuantity }}</span>
                        </el-form-item>
                        <el-form-item label="是否上架">
                            <span>{{ props.row.allowSale }}</span>
                        </el-form-item>
                        <el-form-item label="厂商">
                            <span>{{ props.row.manufacturerId }}</span>
                        </el-form-item>
                        <el-form-item label="供货商">
                            <span>{{ props.row.supplierId }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column prop="commodityId" label="商品编号" width="120">
            </el-table-column>
            <el-table-column prop="commodityName" label="商品名称" width="120" :show-overflow-tooltip='true'>
            </el-table-column>
            <el-table-column prop="productType[0].typeName" label="类型" width="120">
            </el-table-column>
            <el-table-column prop="price" label="价格" width="120">
            </el-table-column>
            <el-table-column prop="promotionalPrice" label="促销价格" width="120">
            </el-table-column>
            <el-table-column prop="promotion_start_date" label="促销开始日期" width="150">
            </el-table-column>
            <el-table-column prop="promotion_end_date" label="促销截止日期" width="150">
            </el-table-column>
            <el-table-column prop="allowDiscount" label="是否允许打折" width="120">
            </el-table-column>
            <el-table-column prop="stockQuantity" label="库存数量" width="120">
            </el-table-column>
            <el-table-column prop="allowSale" label="是否上架" width="120">
            </el-table-column>
            <el-table-column prop="manufacturerId" label="厂商编号" width="120">
            </el-table-column>
            <el-table-column prop="supplierId" label="供货商编号" width="120">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="360">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="grounding(scope.$index, scope.row)">上架</el-button>
                    <el-button size="mini" type="primary" @click="undercarriage(scope.$index, scope.row)">下架</el-button>
                    <el-button size="mini" type="success" @click="promo(scope.$index, scope.row)">促销</el-button>
                    <el-button size="mini" type="warning" @click="modify(scope.$index, scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" @click="deleted(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!--dialog-->
    <!--促销-->
    <el-dialog title="促销信息" :visible.sync="promoDialog" width="60%">
        <el-form :model="tableData">
            <el-form-item label="商品编号" label-width="100px">
                <el-input v-model="rowData.commodityId" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品名称" label-width="100px">
                <el-input v-model="rowData.commodityName" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="价格" label-width="100px">
                <el-input v-model="rowData.price" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="促销价格" label-width="100px">
                <el-input v-model="promoData.promotionalPrice" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="促销时间" label-width="100px">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="开始时间" v-model="promoData.promotionStartDate"
                                    style="width: 80%;" value-format="yyyy-MM-dd"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="结束时间" v-model="promoData.promotionEndDate"
                                    style="width: 80%;" value-format="yyyy-MM-dd"></el-date-picker>
                </el-col>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="promoDialogCancle">取 消</el-button>
            <el-button type="primary" @click="promoDialogSure">确 定</el-button>
        </div>
    </el-dialog>
    <!--修改-->
    <el-dialog title="修改信息" :visible.sync="modifyDialog" width="60%">
        <el-form :model="tableData">
            <el-form-item label="图片" label-width="100px">
                <el-upload
                        action="#"
                        list-type="picture-card"
                        multiple
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-change="handleChange"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" >
                </el-dialog>
            </el-form-item>
            <el-form-item label="商品编号" label-width="100px">
                <el-input v-model="rowData.commodityId" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品名称" label-width="100px">
                <el-input v-model="rowData.commodityName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品类型" label-width="100px" prop="typeId">
                <el-select v-model="rowData.typeId" placeholder="商品类型">
                    <el-option
                            v-for="item in productType"
                            :key="item.typeId"
                            :label="item.typeName"
                            :value="item.typeId">
                        <span style="float: left">{{ item.typeId }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.typeName }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="价格" label-width="100px">
                <el-input v-model="rowData.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="库存报警数量" label-width="100px">
                <el-input v-model="rowData.stockAlarmQuantity" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="允许打折" label-width="100px">
                <el-switch v-model="rowData.allowDiscount" active-value="允许打折"
                           inactive-value="不允许打折"></el-switch>
            </el-form-item>
            <el-form-item label="允许销售" label-width="100px" id="canSaleSwitch">
                <el-switch v-model="rowData.allowSale" active-value="上架中" inactive-value="已下架"></el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="modifyDialogCancle">取 消</el-button>
            <el-button type="primary" @click="modifyDialogSure">确 定</el-button>
        </div>
    </el-dialog>
    <!--删除-->
    <el-dialog
            title="删除商品信息"
            :visible.sync="deleteDialog"
            width="30%">
        <span>确认删除该商品信息吗</span>
        <span slot="footer" class="dialog-footer">
			<el-button @click="deleteDialogCancle">取 消</el-button>
			<el-button type="primary" @click="deleteDialogSure">确 定</el-button>
			</span>
    </el-dialog>

    <!--分页 添加商品信息-->
    <div class="pagination">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="PaginationData.currentPage"
                :page-sizes="[5, 10, 20, 30,50]"
                :page-size="PaginationData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="PaginationData.total">
        </el-pagination>
        <div class="add">
            <el-button type="primary" round @click="add">添加商品信息</el-button>
        </div>
    </div>
    <!--添加商品信息dialog-->
    <el-dialog title="添加商品信息" :visible.sync="addDialog" width="60%">
        <el-form :model="addData" :rules="rules" ref="addData">
            <el-form-item label="商品图片" label-width="100px">
                <el-upload
                        action="#"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-change="handleChange"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" >
                </el-dialog>
            </el-form-item>
            <el-form-item label="商品编号" label-width="100px" prop="commodityId">
                <el-input v-model="addData.commodityId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品名称" label-width="100px" prop="commodityName">
                <el-input v-model="addData.commodityName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品类型" label-width="100px" prop="typeId">
                <el-select v-model="addData.typeId" placeholder="商品类型" class="add_manufacturerId">
                    <el-option
                            v-for="item in productType"
                            :key="item.typeId"
                            :label="item.typeName"
                            :value="item.typeId">
                        <span style="float: left">{{ item.typeId }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.typeName }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="价格" label-width="100px" prop="price">
                <el-input v-model="addData.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="库存数量" label-width="100px" prop="stockQuantity">
                <el-input v-model="addData.stockQuantity" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="库存报警数量" label-width="100px" prop="stockAlarmQuantity">
                <el-input v-model="addData.stockAlarmQuantity" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="允许打折" label-width="100px">
                <el-switch v-model="addData.allowDiscount" active-value="1" inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="允许销售" label-width="100px" class="add_allowSale">
                <el-switch v-model="addData.allowSale" active-value="1" inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="厂商" label-width="100px" prop="manufacturerId">
                <el-select v-model="addData.manufacturerId" placeholder="请选择" class="add_manufacturerId">
                    <el-option
                            v-for="item in manufacturers"
                            :key="item.value" :label="item.manufacturerName"
                            :value="item.manufacturerId">
                        <span style="float: left">{{ item.manufacturerName }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.manufacturerId }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="供货商" label-width="100px" prop="supplierId">
                <el-select v-model="addData.supplierId" placeholder="供货商编号" class="add_supplierId">
                    <el-option
                            v-for="item in suppliers"
                            :key="item.value"
                            :label="item.supplierName"
                            :value="item.supplierId">
                        <span style="float: left">{{ item.supplierName }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.supplierId }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addDialogCancle('addData')">取 消</el-button>
            <el-button type="primary" @click="addDialogSure('addData')">确 定</el-button>
        </div>
    </el-dialog>


</div>

<!--要使用vue的js代码-->
<script>
    var v = new Vue({
        el: '#goods',
        data: {
            size: '',
            //查询条件
            query: {
                commodityId: '',
                commodityName: '',
                typeId: '',
                ispromo: 0,
                isnervous: 0
            },
            productType: [],
            tableData: [],
            PaginationData: {
                currentPage: 1,
                pageSize: 10,
                total: 50,
            },
            promoDialog: false,
            modifyDialog: false,
            deleteDialog: false,
            addDialog: false,
            rowData: {},

            imgList:[],
            dialogImageUrl: '',
            dialogVisible: false,
            addData: {
                commodityId: '',
                commodityName: '',
                typeId: '',
                price: null,
                allowDiscount: 1,
                stockQuantity: null,
                stockAlarmQuantity: null,
                allowSale: 1,
                manufacturerId: '',
                supplierId: ''
            },
            promoData: {
                commodityId: '',
                promotionalPrice: null,
                promotionStartDate: '',
                promotionEndDate: '',
            },
            manufacturers: [],
            suppliers: [],
            rules: {
                commodityId: [
                    {required: true, message: '商品编号不能为空', trigger: 'blur'}
                ],
                commodityName: [
                    {required: true, message: '商品名称不能为空', trigger: 'blur'}
                ],
                typeId: [
                    {required: true, message: '请选择', trigger: 'change'}
                ],
                price: [
                    {required: true, message: '价格不能为空', trigger: 'blur'}
                ],
                stockQuantity: [
                    {required: true, message: '库存不能为空', trigger: 'blur'}
                ],
                stockAlarmQuantity: [
                    {required: true, message: '库存预警数量不能为空', trigger: 'blur'}
                ],
                manufacturerId: [
                    {required: true, message: '请选择', trigger: 'change'}
                ],
                supplierId: [
                    { required: true, message: '请选择', trigger: 'change' }
                ]
            },
        },
        methods: {
            //商品详情图片
            dealPics(index, row){
                pics = row.commodityPic.split(';');
                console.log(pics);
            },
            //查询按钮点击事件
            onSubmit() {
                let pageStartNo = (this.PaginationData.currentPage - 1) * this.PaginationData.pageSize;
                let str = '';
                if (!this.query.commodityId == false || this.query.commodityId != '') {
                    str += '&commodityId=' + this.query.commodityId;
                }
                if (!this.query.commodityName == false || this.query.commodityName != '') {
                    str += '&commodityName=' + this.query.commodityName;
                }
                if (!this.query.typeId == false || this.query.typeId != '') {
                    str += '&typeId=' + this.query.typeId;
                }
                if (this.query.ispromo != null) {
                    str += '&ispromo=' + this.query.ispromo;
                }
                if (this.query.isnervous != null) {
                    str += '&isnervous=' + this.query.isnervous;
                }
                str += '&pageStartNo=' + pageStartNo + '&pageSize=' + this.PaginationData.pageSize;
                console.log(str);
                axios.get('../addGoods?op=findTotalByTrem' + str).then(resp => {
                    if (resp.status == 200) {
                        this.PaginationData.total = resp.data;
                    }
                });
                axios.get('../addGoods?op=findByTrem' + str).then(response => {
                    if (response.data.code == 200) {
                        this.tableData = response.data.data;

                        for (let i = 0;i < this.tableData.length;i++){
                            const arr = this.tableData[i].commodityPic.split(';');
                            this.$set(this.tableData[i], 'pics', arr);
                            console.log(arr);
                        }

                        for (let i = 0; i < this.tableData.length; i++) {
                            if (this.tableData[i].allowDiscount == 0) {
                                this.tableData[i].allowDiscount = "不允许打折";
                            } else if (this.tableData[i].allowDiscount == 1) {
                                this.tableData[i].allowDiscount = "允许打折";
                            }
                            if (this.tableData[i].allowSale == 0) {
                                this.tableData[i].allowSale = "已下架";
                            } else if (this.tableData[i].allowSale == 1) {
                                this.tableData[i].allowSale = "上架中";
                            }
                        }
                    } else {
                        console.log(response.data.code);
                    }
                });
            },
            //判断库存是否紧张
            tableRowClassName({row, rowIndex}) {
                if (this.tableData[rowIndex].stockQuantity < this.tableData[rowIndex].stockAlarmQuantity) {
                    return 'warning-row';
                } else if ((this.tableData[rowIndex].stockQuantity - 50) > this.tableData[rowIndex].stockAlarmQuantity) {
                    return 'success-row';
                }
                return '';
            },
            //表格操作
            //上架
            grounding(index, row) {
                if (this.tableData[index].allowSale === '上架中') {
                    alert("该商品已经上架，不能重复上架");
                    return;
                }else{
                    axios.get('../addGoods?op=updateStatus&allowSale=1&commodityId='+row.commodityId).then(response => {
                        if (response.status == 200) {
                            if (response.data) {
                                alert("上架成功！");
                                this.tableData[index].allowSale = '上架中';
                            } else {
                                alert("上架失败！");
                            }
                        }
                    });
                }

            },
            //下架
            undercarriage(index, row) {
                if (this.tableData[index].allowSale === '已下架') {
                    alert("该商品已经下架，不能重复下架");
                    return;
                }else{
                    axios.get('../addGoods?op=updateStatus&allowSale=0&commodityId='+row.commodityId).then(response => {
                        if (response.status == 200) {
                            if (response.data) {
                                alert("下架成功！");
                                this.tableData[index].allowSale = '已下架';
                            } else {
                                alert("下架失败！");
                            }
                        }
                    });
                }
            },
            //促销
            promo(index, row) {
                //先判断该商品是否允许打折
                this.rowData = row;
                this.promoData.commodityId = this.rowData.commodityId;
                this.promoData.promotionalPrice = this.rowData.promotionalPrice;
                let strt = '&commodityId=' + this.promoData.commodityId;
                axios.get('../addGoods?op=findByTrem' + strt).then(response => {
                    if (response.data.code == 200) {
                        if (response.data.data[0].allowDiscount == 0) {
                            alert("促销信息添加失败,该商品不允许打折！");
                            this.promoDialog = false;
                        } else {
                            this.promoDialog = true;
                        }
                    }
                });
            },
            //促销信息取消
            promoDialogCancle: function () {
                this.promoDialog = false;
                this.promoData.commodityId = '';
                this.promoData.promotionalPrice = null;
                this.promoData.promotionStartDate = '';
                this.promoData.promotionEndDate = '';
            },
            //促销信息确认
            promoDialogSure: function () {
                let str = '&commodityId=' + this.promoData.commodityId +
                    '&promotionalPrice=' + this.promoData.promotionalPrice +
                    '&promotionStartDate=' + this.promoData.promotionStartDate +
                    '&promotionEndDate=' + this.promoData.promotionEndDate;
                if (this.promoData.promotionalPrice != null && this.promoData.promotionStartDate != '' && this.promoData.promotionEndDate != '') {
                    axios.get('../addGoods?op=updatePromo' + str).then(response => {
                        if (response.status == 200) {
                            if (response.data != 0) {
                                alert("促销信息添加成功");
                            } else {
                                alert("促销信息添加失败");
                            }
                        } else {
                            alert("失败" + response.status);
                        }
                    });
                } else {
                    alert("添加失败，促销价格、起止日期不能为空");
                }
                this.promoDialog = false;
                this.promoData.commodityId = '';
                this.promoData.promotionalPrice = null;
                this.promoData.promotionStartDate = '';
                this.promoData.promotionEndDate = '';
                this.send();
            },
            //修改
            modify(index, row) {
                console.log("row:::" + row);
                console.log("index:::" + index);
                this.modifyDialog = true;
                this.rowData = row;
            },
            //修改信息取消
            modifyDialogCancle: function () {
                this.modifyDialog = false;
                alert("修改取消");
            },
            //修改信息确认
            modifyDialogSure: function () {
                console.log(this.imgList);
                const param=new FormData();
                this.imgList.forEach(function (x){
                    param.append('fileRaw',x.raw)
                });
                param.append('commodityId',this.rowData.commodityId);
                param.append('commodityName',this.rowData.commodityName);
                param.append('typeId',this.rowData.typeId);
                param.append('price',this.rowData.price);
                param.append('stockAlarmQuantity',this.rowData.stockAlarmQuantity);
                if (this.rowData.allowDiscount == "不允许打折"){
                    param.append('allowDiscount',0);
                }else{
                    param.append('allowDiscount',1);
                }
                if (this.rowData.allowSale == "已下架"){
                    param.append('allowSale',0);
                }else{
                    param.append('allowSale',1);
                }
                console.log(param)

                axios.post("../addGoods?op=modify",param).then(resp=>{
                    if (resp.status == 200){
                        if (resp.data){
                            alert('修改成功!');
                            this.send();
                        }else{
                            alert('修改失败!');
                        }
                    }else{
                        alert('修改失败!');
                    }
                })

                this.modifyDialog = false;
            },
            //删除
            deleted(index, row) {
                this.rowData = row;
                this.deleteDialog = true;
            },
            //删除信息取消
            deleteDialogCancle: function () {
                this.deleteDialog = false;
            },
            //删除信息确认
            deleteDialogSure: function () {
                axios.get('../addGoods?op=deleteCommodityById&commodityId=' + this.rowData.commodityId).then(response => {
                    if (response.status == 200) {
                        if (response.data != 0) {
                            alert("删除商品信息成功");
                            this.deleteDialog = false;
                        } else {
                            alert("删除商品信息失败");
                        }
                    } else {
                        alert("失败" + response.status);
                    }
                    console.log(this.rowData.commodityId);
                    console.log(response.data);
                });
                this.send();
            },
            //分页
            handleSizeChange(val) {
                this.PaginationData.pageSize = val;
                let pageStartNo = (this.PaginationData.currentPage - 1) * this.PaginationData.pageSize;
                let str = '&pageStartNo=' + pageStartNo + '&pageSize=' + this.PaginationData.pageSize;
                axios.get('../addGoods?op=findByTrem' + str).then(response => {
                    if (response.data.code == 200) {
                        this.tableData = response.data.data;

                        for (let i = 0;i < this.tableData.length;i++){
                            const arr = this.tableData[i].commodityPic.split(';');
                            this.$set(this.tableData[i], 'pics', arr);
                            console.log(arr);
                        }

                        for (let i = 0; i < this.tableData.length; i++) {
                            if (this.tableData[i].allowDiscount == 0) {
                                this.tableData[i].allowDiscount = "不允许打折";
                            } else if (this.tableData[i].allowDiscount == 1) {
                                this.tableData[i].allowDiscount = "允许打折";
                            }
                            if (this.tableData[i].allowSale == 0) {
                                this.tableData[i].allowSale = "已下架";
                            } else if (this.tableData[i].allowSale == 1) {
                                this.tableData[i].allowSale = "上架中";
                            }
                        }
                    }
                });
            },
            handleCurrentChange(val) {
                this.PaginationData.currentPage = val;
                let pageStartNo = (this.PaginationData.currentPage - 1) * this.PaginationData.pageSize;
                let str = '&pageStartNo=' + pageStartNo + '&pageSize=' + this.PaginationData.pageSize;
                axios.get('../addGoods?op=findByTrem' + str).then(response => {
                    if (response.data.code == 200) {
                        this.tableData = response.data.data;

                        for (let i = 0;i < this.tableData.length;i++){
                            const arr = this.tableData[i].commodityPic.split(';');
                            this.$set(this.tableData[i], 'pics', arr);
                            console.log(arr);
                        }

                        for (let i = 0; i < this.tableData.length; i++) {
                            if (this.tableData[i].allowDiscount == 0) {
                                this.tableData[i].allowDiscount = "不允许打折";
                            } else if (this.tableData[i].allowDiscount == 1) {
                                this.tableData[i].allowDiscount = "允许打折";
                            }
                            if (this.tableData[i].allowSale == 0) {
                                this.tableData[i].allowSale = "已下架";
                            } else if (this.tableData[i].allowSale == 1) {
                                this.tableData[i].allowSale = "上架中";
                            }
                        }
                    }
                });
            },
            //图片上传
            // 删除文件
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            //预览
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            //图片改变
            handleChange(file,fileList){
                console.log(fileList)
                this.imgList=fileList
            },
            //添加商品信息
            add: function () {
                console.log("添加商品信息")
                this.addDialog = true;
            },
            //添加信息取消
            addDialogCancle(formName) {
                this.addDialog = false;
                this.$refs[formName].resetFields();
                this.addClear();
            },
            //表单数据清空
            addClear: function () {
                this.addData.commodityId = '';
                this.addData.commodityName = '';
                this.addData.typeId = '';
                this.addData.price = null;
                this.addData.allowDiscount = '';
                this.addData.stockQuantity = null;
                this.addData.stockAlarmQuantity = null;
                this.addData.allowSale = null;
                this.addData.manufacturerId = null;
                this.addData.supplierId = null;
                this.imgList = null;
            },
            //添加信息确定
            addDialogSure(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        console.log(this.imgList);
                        const params=new FormData();
                        this.imgList.forEach(function (x){
                            params.append('fileRaw',x.raw)
                        });
                        params.append('commodityId',this.addData.commodityId);
                        params.append('commodityName',this.addData.commodityName);
                        params.append('typeId',this.addData.typeId);
                        params.append('price',this.addData.price);
                        params.append('allowDiscount',this.addData.allowDiscount);
                        params.append('stockQuantity',this.addData.stockQuantity);
                        params.append('stockAlarmQuantity',this.addData.stockAlarmQuantity);
                        params.append('allowSale',this.addData.allowSale);
                        params.append('manufacturerId',this.addData.manufacturerId);
                        params.append('supplierId',this.addData.supplierId);
                        console.log(params)


                        axios.post("../addGoods?op="+"addCommodity",params).then(resp=>{
                            if (resp.status == 200){
                                if (resp.data){
                                    alert('添加成功!');
                                    this.send();
                                }else{
                                    alert('添加失败!');
                                }
                            }else{
                                alert('请求失败!');
                            }
                        })

                        this.addDialog = false;
                        this.$refs[formName].resetFields();
                        this.addClear();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }

                });
            },
            async send() {
                await axios.get('../addGoods?op=findTotal').then(resp => {
                    if (resp.status == 200) {
                        this.PaginationData.total = resp.data;
                    }

                });
                let pageStartNo = (this.PaginationData.currentPage - 1) * this.PaginationData.pageSize;
                let str = '&pageStartNo=' + pageStartNo + '&pageSize=' + this.PaginationData.pageSize;
                await axios.get('../addGoods?op=findByTrem' + str).then(response => {
                    if (response.data.code == 200) {
                        this.tableData = response.data.data;

                        for (let i = 0;i < this.tableData.length;i++){
                            const arr = this.tableData[i].commodityPic.split(';');
                            this.$set(this.tableData[i], 'pics', arr);
                            console.log(arr);
                        }

                        for (let i = 0; i < this.tableData.length; i++) {
                            if (this.tableData[i].allowDiscount == 0) {
                                this.tableData[i].allowDiscount = "不允许打折";
                            } else if (this.tableData[i].allowDiscount == 1) {
                                this.tableData[i].allowDiscount = "允许打折";
                            }
                            if (this.tableData[i].allowSale == 0) {
                                this.tableData[i].allowSale = "已下架";
                            } else if (this.tableData[i].allowSale == 1) {
                                this.tableData[i].allowSale = "上架中";
                            }
                        }
                    }
                });
                await axios.get('../productType?op=findAll').then(resp => {
                    if (resp.data.code == 200) {
                        this.productType = resp.data.data;
                    }
                });
                await axios.get('../manufacturer', {params: {op: "show"}}).then(resp => {
                    if (resp.data.code == 200) {
                        this.manufacturers = resp.data.data;
                    }
                });
                await axios.get('../supplier', {params: {op: "show"}}).then(resp => {
                    if (resp.data.code == 200) {
                        this.suppliers = resp.data.data;
                    }
                });
            }
        },
        mounted() {
            //页面加载完成后，需要同时发送多个请求，不能在mounted中发送多个请求，需要并发访问
            //并发
            this.send();
        }
    });
</script>

<!--不要使用vue的js代码-->
<script>

</script>

</body>
</html>
